<@sp.pagehead shiroUserHelper.getCurrentShiroUser().parentSources />

<div class="container">
    <div class="row clearfix">
        <div class="col-md-3 column">
        </div>
        <div class="col-md-6 column">
            <h4 style="text-align: center">本校共有 <strong>${clazzCount}</strong> 个班级</h4>
            <h4 style="text-align: center">共 <strong>${stuCount}</strong> 名学生</h4>
        </div>
        <div class="col-md-3 column">
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-6 column">
            <div id="countClazzStuLine" style="width: 400px; height: 400px"></div>
        </div>
        <div class="col-md-6 column">
            <div id="countClazzStuArea" style="width: 500px; height: 400px"></div>
        </div>
    </div>
</div>


<!--导入echarts和index的js-->
<script src="<@sp.static/>/echarts/echarts.js"></script>
<script type="application/javascript">
        var countClazzStuLine = echarts.init(document.getElementById('countClazzStuLine'));
        var countClazzStuArea = echarts.init(document.getElementById('countClazzStuArea'));

        var option = {
            title: {
                text: '各班人数统计'
            },
            color: ['RGB(0,172,172)'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: [
                    <#list countClazzStudent as c>
                        '${c[1]}',
                    </#list>
                    ],
                axisTick: {
                    alignWithLabel: true
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: '班级人数',
                type: 'bar',
                barWidth: '60%',
                data: [
                <#list countClazzStudent as c>
                     '${c[2]}',
                </#list>
                ]
            }]
        };

        var option2 = {
            title : {
                text: '各班人数占比',
                subtext: '统计了本校每个班学生人数占比',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                bottom: 'bottom',
                data: [
                <#list countClazzStudent as c>
                    '${c[1]}',
                </#list>
                ]
            },
            series : [
                {
                    name: '班级人数',
                    type: 'pie',
                    radius : '65%',
                    data:[

                    <#list countClazzStudent as c>
                        {value:${c[2]}, name:'${c[1]}'},
                    </#list>
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };


        countClazzStuLine.setOption(option);
        countClazzStuArea.setOption(option2);
</script>